<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../app/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-controller="AppController">

<div ng-controller="Ctrl1">
    <button class="btn btn-default" ng-click="click1();">ctrl1</button>
    <div ng-controller="Ctrl2">
        <button class="btn btn-default" ng-click="click2();">ctrl2</button>
    </div>
</div>

<div ng-controller="Ctrl3">
    <button class="btn btn-default" ng-click="click3();">ctrl3</button>
</div>

<script src="../app/bower_components/jquery/dist/jquery.js"></script>
<script src="../app/bower_components/angular/angular.js"></script>

<script>
    var app = angular.module('app', []);
    app.controller('AppController', function ($scope) {

    });

    app.controller('Ctrl1', function ($scope) {
        $scope.$on('click1', function () {
            console.log('ctrl1 get click1');
        });
        $scope.$on('click2', function () {
            console.log('get click2');
        });
        $scope.click1 = function () {
            $scope.$broadcast('click1');
        }
    });
    app.controller('Ctrl2', function ($scope) {
        $scope.$on('click1', function () {
            console.log('ctrl2 get click1');
        });
        $scope.click2 = function () {
            $scope.$emit('click2');
        }
    });
    app.controller('Ctrl3', function ($scope) {
        $scope.$on('click1', function () {
            console.log('ctrl3 get click1');
        });

        $scope.$on('click2', function () {
            console.log('ctrl3 get click2');
        });
        $scope.click3 = function () {
            $scope.$broadcast('click3');
        }
    });
    app.directive('abc', function () {
        return {
            restrict: 'ACE',
            link: function (scope, element, attrs) {

            }
        }
    });

</script>
</body>
</html>
